<template>
    <div class="zl-login-main">
        <div class="login-bg"></div>
        <div class="login-box">
            <div class="login-form">
                <div class="logo">
                    <img :src="logo" alt="logo" />
                </div>
                <div class="title">欢迎登录GB28181流媒体</div>
                <el-form ref="formRef" :model="state.form" :rules="rules" label-width="80px" size="large">
                    <el-form-item label="用户名" prop="login_name">
                        <el-input v-model="state.form.login_name" class="input" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="state.form.password" type="password" class="input" show-password clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 360px" @click="onLogin">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
// @ts-ignore
import logo from '@/assets/image/logo.png';
import { ElMessage, FormInstance, FormItemRule } from 'element-plus';
import { buildValidatorData } from '@/utils/validate';
import api from '@/api';
import { useTokenStore } from '@/stores/token';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const formRef = ref<FormInstance>();
const router = useRouter();
const state = reactive({
    form: {
        login_name: 'admin',
        password: '123456',
    },
    loading: false,
});

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    login_name: [buildValidatorData({ name: 'required', title: '登陆账号' })],
    password: [buildValidatorData({ name: 'required', title: '密码' }), buildValidatorData({ name: 'password' })],
});

const onLogin = () => {
    formRef.value?.validate().then((validate: any) => {
        if (validate === true) {
            api.post('/api/web/login/login', state.form)
                .then((res) => {
                    if (res.code === 200 && res.data) {
                        useTokenStore().setToken(res.data.token);
                        queryCurLoginUser();
                    }
                })
                .catch((error) => {
                    console.error(error);
                    ElMessage.error(`code: ${error.code} msg: ${error.msg}`);
                });
        }
    });
};

/** 加载当前登陆用户信息 */
const queryCurLoginUser = () => {
    api.post('/api/web/user/queryCurLoginUser')
        .then((res) => {
            if (res.code === 200 && res.data) {
                ElMessage.success('登陆成功');
                useUserStore().setUser(res.data.user);
                router.push({ name: 'admin' });
            }
        })
        .catch((error) => {
            console.error(error);
            ElMessage.error(`code: ${error.code} msg: ${error.msg}`);
        });
};
</script>

<style scoped lang="scss">
.zl-login-main {
    width: 100vw;
    height: 100vh;
    position: relative;

    .login-bg {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(/bg.jpg);
        /*将🎀页面背景  图片路径替换为你自己的图片路径*/
        background-size: cover;
        /*保持图片比例并完全覆盖元素*/
        background-position: center center;
        opacity: 0.5;
      z-index: 1;
    }

    .login-box {
        width: 100vw;
        height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
    }

    .logo {
        width: 100%;
        height: 120px;
        text-align: center;

        img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            margin-top: 10px;
        }
    }

    .login-form {
        width: 500px;
        height: 480px;
        background-color: #0e0e0e;
        position: absolute;
        left: 50%;
        right: 50%;
        top: 70px;
        margin: 0 0 0 -250px;
        border-radius: 20px;
    }

    .title {
        width: 100%;
        height: 60px;
        margin-bottom: 20px;
        margin-top: 10px;
        font-size: 32px;
        color: sienna;
        text-align: center;
    }

    .input {
        max-width: 360px;
    }
}
</style>
